.goal{
  width:100%;
  padding:20px;
  .nav{
    // height: 50px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    .title{
      font-size: 20px;
      font-weight: 900;
    }
    .select {
      width:80px
    }
  }

  .goal-content{
    margin-top:20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
  }

  .goal-item-year {
    flex:0 0 50%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-bottom: 40px;
    .desc {
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }

    .desc:hover{
      color:var(--app-hight-color)
    }
  }

  .goal-description{
    margin-top:20px;
  }
  .calendar{
    width:100%;
    overflow-x: scroll;
    .goal-calendar{
      width:1200px;
      height: 300px;
    }
  }

  @media only screen and (max-width: 768px) {
    .goal-item-year {
      flex:0 0 100%!important;
    }
  }

  .desc-item {
    // background:rgba(0, 102, 255,0.1);
    padding:10px;
    border-radius: var(--app-radius);
    margin-bottom:20px;
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    pre,
    form,
    fieldset,
    input,
    p,
    blockquote,
    div,
    th,
    td {
      font-weight: revert;
      margin: revert;
      box-sizing: revert;
    }
  }

  .item-title{
    font-size: 20px;
    font-weight: 900;
    .font{
      margin-left: 10px;
    }
  }

  .item-title:hover{
    color:var(--app-hight-color);
  }
}


.review{
  width:100%;
  background:var(--app-bg-color);
  padding:20px;
  .date{
    margin-bottom:20px;
    font-size: 18px;
    color:var(--header-font-color);
  }
  .r_goal{
    
  }
}

@media only screen and (max-width: 768px) {
  .goal {
    width:100vw!important;
  }
}